<template>
  <div>
    <div class="container">
      <el-row class="mb-4">
        <div v-for="newsinfo in newsList">
          <el-button type="primary" round @click="getNewsTypeid(newsinfo.typeId)">{{ newsinfo.typeName }}</el-button>
        </div>
      </el-row>
    </div>

    <div class="container">
      <el-card class="box-card" v-for="item in getNewslist">
        <template #header>
          <div class="card-header">
            <div class="text item"
              ><H1>新闻标题:{{ item.title }}</H1></div
            >
          </div>
        </template>
        <div @click="getNewsTypeidss(item.oid)" class="text item">新闻摘要:{{ item.digest }}</div>
        <el-divider />
        <span
          ><H6>新闻来源:{{ item.source }}</H6></span
        >
        <span>新闻发布时间:{{ Tools.formatDate(item.postTime) }}</span>
      </el-card>
    </div>
    <div class="container">
      <PageComp :page="pages" @page-change="getNewsTwo"></PageComp>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ElRow, ElButton, ElCard, ElDivider, ElInputNumber, ElLoading } from 'element-plus'
import { ref } from 'vue'
import { L12030 } from '../../api/L12030'
import { Tools } from '../../ts/Tools'
import { router } from '../../router'
import PageComp from '../../components/PageComp.vue'
//#region 跳转详情
function getNewsTypeidss(item: any) {
  router.push(`/news/about/${item}`)
}
//#endregion

//#region 获取新闻列表
const newsList = ref([])
function getNewsOne() {
  const loading = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  L12030.get('/api/news/one', {}, (data: any) => {
    loading.close()
    if (data.code == '1') {
      newsList.value = data.data
    }
  })
}
getNewsOne()
//#endregion

//#region 获取新闻来源
//获取所需参数
// 默认为新闻
const newsTypeid = ref({
  typeId: '532',
})
// 默认为第一页
const pages = ref({
  page: 1,
})
function getNewsTypeid(typeId: string) {
  newsTypeid.value.typeId = typeId
  getNewsTwo()
}
const getNewslist = ref([])
function getNewsTwo() {
  const loading = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  L12030.get('/api/news/all', Tools.concatJson(newsTypeid.value, pages.value), (data: any) => {
    loading.close()
    if (data.success) {
      console.log(data.data)
      getNewslist.value = data.data
      pages.value=data.page
    }
  })
}

getNewsTwo()

//#endregion

</script>

<style lang="scss" scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 480px;
}

.container {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ass {
  height: 20px;
}

body {
  margin: 0;
}
.example-showcase .el-loading-mask {
  z-index: 9;
}
</style>
